.z-btn {
  position: relative;
  overflow: hidden;
}
.z-btn a {
  position: relative;
  z-index: 999;
  transition: 0.5s;
}
.z-btn span {
  position: relative;
  z-index: 999;
  transition: 0.5s;
  display: block;
}
.z-btn img {
  position: relative;
  z-index: 999;
  transition: 0.5s;
}
.z-btn1:hover {
  color: #555;
}
.z-btn1:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  transition: 0.5s;
}
.z-btn1:hover:before {
  width: 100%;
}
.z-btn2:hover {
  color: #555;
}
.z-btn2:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  transition: 0.5s;
}
.z-btn2:hover:before {
  width: 100%;
}
.z-btn3:hover {
  color: #555;
}
.z-btn3:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  transition: 0.5s;
}
.z-btn3:hover:before {
  width: 50%;
}
.z-btn3:after {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  transition: 0.5s;
}
.z-btn3:hover:after {
  width: 50%;
}
.z-btn4:hover {
  color: #555;
}
.z-btn4:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn4:hover:before {
  height: 50%;
}
.z-btn5:hover {
  color: #555;
}
.z-btn5:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn5:hover:before {
  height: 100%;
}
.z-btn6:hover {
  color: #555;
}
.z-btn6:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn6:hover:before {
  height: 100%;
}
.z-btn6:after {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn6:hover:after {
  height: 100%;
}
.z-btn7:hover {
  color: #555;
}
.z-btn7:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0%;
  left: 0%;
  background: #fff;
  transition: 0.5s;
}
.z-btn7:hover:before {
  height: 100%;
}
.z-btn8:hover {
  color: #555;
}
.z-btn8:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  background: #fff;
  transition: 0.5s;
}
.z-btn8:hover:before {
  height: 100%;
}
.z-btn9 > span {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.z-btn9:hover {
  color: #555;
}
.z-btn9:hover > span {
  top: 50%;
}
.z-btn9:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0%;
  left: 0%;
  background: #fff;
  transition: 0.5s;
}
.z-btn9:hover:before {
  height: 100%;
}
.z-btn10 > span {
  position: absolute;
  top: -120%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.z-btn10:hover {
  color: #555;
}
.z-btn10:hover > span {
  top: 50%;
}
.z-btn10:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0%;
  left: 0%;
  background: #fff;
  transition: 0.5s;
}
.z-btn10:hover:before {
  height: 100%;
}
.z-btn11 > span:nth-child(1) {
  position: absolute;
  top: -20%;
  left: 45%;
  transform: translate(-50%, -50%);
}
.z-btn11 > span:nth-child(2) {
  position: absolute;
  top: 120%;
  left: 55%;
  transform: translate(-50%, -50%);
}
.z-btn11:hover {
  color: #555;
}
.z-btn11:hover > span:nth-child(1) {
  top: 50%;
}
.z-btn11:hover > span:nth-child(2) {
  top: 50%;
}
.z-btn11:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn11:hover:before {
  height: 50%;
}
.z-btn12 > span:nth-child(1) {
  position: absolute;
  top: 50%;
  left: -120%;
  transform: translate(-50%, -50%);
}
.z-btn12 > span:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 120%;
  transform: translate(-50%, -50%);
}
.z-btn12:hover {
  color: #555;
}
.z-btn12:hover > span:nth-child(1) {
  left: 45%;
}
.z-btn12:hover > span:nth-child(2) {
  left: 55%;
}
.z-btn12:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn12:hover:before {
  height: 50%;
}
.z-btn13:hover {
  color: #fff;
}
.z-btn13:before {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn13:hover:before {
  height: 50%;
}
.z-btn13:after {
  content: "";
  width: 100%;
  height: 0%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn13:hover:after {
  height: 50%;
}
.z-btn14:hover {
  color: #555;
}
.z-btn14:before {
  content: "";
  width: 50%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn14:hover:before {
  width: 100%;
  height: 100%;
}
.z-btn15:hover {
  color: #555;
}
.z-btn15:before {
  content: "";
  width: 0%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn15:hover:before {
  width: 100%;
  height: 100%;
}
.z-btn16:hover {
  color: #555;
}
.z-btn16:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn16:hover:before {
  width: 100%;
}
.z-btn17:hover {
  color: #555;
}
.z-btn17:before {
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn17:hover:before {
  width: 50%;
}
.z-btn18:hover {
  color: #555;
}
.z-btn18:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn18:hover:before {
  left: 0%;
}
.z-btn18:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  right: -150%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn18:hover:after {
  right: -100%;
}
.z-btn19:hover {
  color: #fff;
}
.z-btn19:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn19:hover:before {
  left: -25%;
}
.z-btn19:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  right: -150%;
  transform: translate(-50%, -50%);
  background: #fff;
  transition: 0.5s;
}
.z-btn19:hover:after {
  right: -125%;
}